{% extends 'base.html' %}
{% load static %}

{% block title %}编辑用户 - {{ target_user.username }} - 维修管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>编辑用户</h1>
        <div>
            <a href="{% url 'users:user_detail' target_user.pk %}" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left"></i> 返回详情
            </a>
            <a href="{% url 'users:user_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-list"></i> 用户列表
            </a>
        </div>
    </div>

    {% if messages %}
    <div class="alert alert-info">
        {% for message in messages %}
        <div>{{ message }}</div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">用户信息</h5>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                
                <div class="row">
                    <!-- 基本信息 -->
                    <div class="col-md-6">
                        <h6 class="mb-3">基本信息</h6>
                        
                        <div class="mb-3">
                            <label class="form-label">用户名</label>
                            <input type="text" class="form-control" value="{{ target_user.username }}" readonly>
                            <div class="form-text">用户名创建后不可修改</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">姓</label>
                            <input type="text" name="first_name" class="form-control" value="{{ target_user.first_name|default:'' }}">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">名</label>
                            <input type="text" name="last_name" class="form-control" value="{{ target_user.last_name|default:'' }}">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">邮箱</label>
                            <input type="email" name="email" class="form-control" value="{{ target_user.email|default:'' }}">
                        </div>
                    </div>

                    <!-- 角色和状态 -->
                    <div class="col-md-6">
                        <h6 class="mb-3">角色和状态</h6>
                        
                        <div class="mb-3">
                            <label class="form-label">用户角色</label>
                            <select name="role" class="form-select" required>
                                {% for value, label in role_choices %}
                                <option value="{{ value }}" {% if target_user.profile.role == value %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">用户状态</label>
                            <select name="is_active" class="form-select" required>
                                <option value="true" {% if target_user.is_active %}selected{% endif %}>启用</option>
                                <option value="false" {% if not target_user.is_active %}selected{% endif %}>禁用</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">联系电话</label>
                            <input type="tel" name="phone" class="form-control" value="{{ target_user.profile.phone|default:'' }}">
                        </div>
                    </div>
                </div>

                <!-- 密码修改部分 -->
                <div class="row mt-4">
                    <div class="col-12">
                        <h6 class="mb-3">密码修改</h6>
                        <div class="card bg-light">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">新密码</label>
                                            <input type="password" name="new_password" class="form-control" placeholder="输入新密码（留空不修改）">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">确认密码</label>
                                            <input type="password" name="confirm_password" class="form-control" placeholder="确认新密码">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-text">只有输入新密码时才会修改密码</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{% url 'users:user_detail' target_user.pk %}" class="btn btn-secondary">
                                取消
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> 保存更改
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}
h6 {
    color: #6c757d;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}
</style>
{% endblock %}
